<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <style>
        body {
            /*background-image: url();*/
            background-repeat: no-repeat;
            background-size: 100% auto;
        }

        #sex {
            padding-left: 50px;
        }
    </style>
</head>
<body>
<h1 style="margin-left: 150px;margin-bottom: 30px">添加客户信息</h1>
<div id="addCustomer-div">
    <form id="addCustomer-form" class="form-group">
        <div class="input-group mb-3" style="width: 450px">
            <label for="companyName" style="width: 140px;text-align: center;">公司名称:</label>
            <input type="text" name="companyName" class="form-control" id="companyName">
        </div>

        <div class="input-group mb-3" style="width: 450px">
            <label for="companyAddress" style="width: 140px;text-align: center;">公司地址:</label>
            <input type="text" name="companyAddress" step="0.01" class="form-control" id="companyAddress">
        </div>
        <div class="input-group mb-3" style="width: 450px">
            <label for="companyCredit" style="width: 140px;text-align: center;">信用度:</label>
            <input type="number" maxlength="1" name="companyCredit" step="0.01" class="form-control" id="companyCredit">
        </div>
        <div class="input-group mb-3" style="width: 450px">
            <label for="phone" style="width: 140px;text-align: center;">联系方式:</label>
            <input type="number" name="phone" step="0.01" class="form-control" id="phone">
        </div>
        <div class="input-group mb-3" style="width: 450px;margin-top: 30px">
            <button type="button" id="submit-btn" class="btn btn-primary"
                    style="margin-left: 150px; margin-right: 100px" @click="addCustomer()">添加
            </button>
            <button type="button" class="btn btn-danger" @click="returncustomerlist()">返回</button>
        </div>
    </form>
</div>
<script type="text/javascript" src="../bootstrap/jquery3.6.js"></script>
<script type="text/javascript" src="../bootstrap/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="../bootstrap/vue.js"></script>
<script>
            let app = new Vue({
                el: "#addCustomer-div",
                methods: {
                    addCustomer: function () {
                        $.ajax({
                            type: "post",
                            url: "../Customer/addCustomer",
                            data: $("#addCustomer-form").serialize(),
                            dataType: "json",
                            success: function (data) {
                                if (data.message == "添加成功") {
                                    location.href = "customer_list.html";
                                }
                            }
                        })
                    },
                    returncustomerlist: function () {
                        location.href = "customer_list.html";
                    }
                }
            })


</script>
</body>
</html>